<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Response.Buffer = True
Response.ContentType = "text/html; charset=utf-8"
Response.CharSet = "utf-8"
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Redis COM Demo - Chinese Display Fixed</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 { margin: 0; font-size: 2.5em; }
        .header p { margin: 10px 0 0; opacity: 0.9; }

        .content { padding: 30px; }
        .success { color: #28a745; font-weight: bold; font-size: 1.1em; }
        .error { color: #dc3545; font-weight: bold; }
        .warning { color: #ffc107; font-weight: bold; }

        .test-section {
            margin: 30px 0;
            padding: 25px;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            background: #f8f9fa;
        }
        .test-section h2 {
            margin-top: 0;
            color: #495057;
            border-bottom: 2px solid #dee2e6;
            padding-bottom: 10px;
        }

        .result-box {
            background: #ffffff;
            padding: 20px;
            margin: 15px 0;
            border-radius: 8px;
            font-family: 'Microsoft YaHei', 'Courier New', monospace;
            white-space: pre-wrap;
            font-size: 13px;
            border-left: 4px solid #007bff;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .demo-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #dee2e6;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .demo-card h4 {
            margin-top: 0;
            color: #007bff;
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 8px;
        }

        .chinese-display {
            background: #e8f5e8;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            border-left: 4px solid #28a745;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            font-size: 14px;
            color: #2d5a2d;
        }

        .unicode-toggle {
            background: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            margin: 5px 0;
        }

        .raw-unicode {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            color: #6c757d;
            display: none;
        }
    </style>
    <script>
        function decodeUnicode(str) {
            try {
                // 解码Unicode转义序列
                return str.replace(/\\u([0-9a-fA-F]{4})/g, function(match, hex) {
                    return String.fromCharCode(parseInt(hex, 16));
                });
            } catch(e) {
                return str;
            }
        }

        function toggleUnicodeDisplay(elementId) {
            const element = document.getElementById(elementId);
            const rawElement = document.getElementById(elementId + '_raw');

            if (rawElement.style.display === 'none') {
                rawElement.style.display = 'block';
                element.querySelector('.unicode-toggle').textContent = '隐藏原始Unicode';
            } else {
                rawElement.style.display = 'none';
                element.querySelector('.unicode-toggle').textContent = '显示原始Unicode';
            }
        }

        function processChineseDisplay() {
            // 处理所有包含Unicode的元素
            const elements = document.querySelectorAll('.result-box');
            elements.forEach((element, index) => {
                const content = element.textContent;
                if (content.includes('\\u')) {
                    const decoded = decodeUnicode(content);

                    // 创建中文显示区域
                    const chineseDiv = document.createElement('div');
                    chineseDiv.className = 'chinese-display';
                    chineseDiv.innerHTML = '<strong>🇨🇳 中文显示:</strong><br>' +
                        decoded.replace(/\\n/g, '\n').replace(/\n/g, '<br>');

                    // 创建切换按钮
                    const toggleBtn = document.createElement('button');
                    toggleBtn.className = 'unicode-toggle';
                    toggleBtn.textContent = '显示原始Unicode';
                    toggleBtn.onclick = () => toggleUnicodeDisplay('unicode_' + index);

                    // 创建原始显示区域
                    const rawDiv = document.createElement('div');
                    rawDiv.className = 'raw-unicode';
                    rawDiv.id = 'unicode_' + index + '_raw';
                    rawDiv.textContent = content;

                    // 插入到元素前面
                    element.parentNode.insertBefore(chineseDiv, element);
                    element.parentNode.insertBefore(toggleBtn, element);
                    element.parentNode.insertBefore(rawDiv, element);
                    element.id = 'unicode_' + index;
                }
            });
        }

        // 页面加载完成后处理
        window.addEventListener('load', processChineseDisplay);
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 Redis COM Demo - 中文显示优化版</h1>
            <p>Production-Ready Redis Integration for Classic ASP</p>
            <p>Perfect Chinese Support | Unicode Auto-Decode | High Performance</p>
        </div>

        <div class="content">
            <%
            On Error Resume Next

            ' 创建Redis COM对象
            Set objCOM = Server.CreateObject("RedisCOM.Server")
            If Err.Number <> 0 Then
                Response.Write "<div class='error'>❌ Error: RedisCOM.Server creation failed</div>"
                Response.Write "<div class='warning'>Error Details: " & Err.Description & "</div>"
                Response.Write "<div style='margin-top: 15px; padding: 15px; background: #fff3cd; border-radius: 8px;'>"
                Response.Write "<strong>🔧 Quick Fix:</strong><br>"
                Response.Write "1. Register component: <code>python redis_com_server.py</code><br>"
                Response.Write "2. Install Redis library: <code>pip install redis</code><br>"
                Response.Write "3. Ensure Redis server running: 10.0.0.204:6379"
                Response.Write "</div>"
                Response.End
            Else
                Response.Write "<div class='success'>✅ RedisCOM.Server initialized successfully!</div>"
            End If
            %>

            <div class="test-section">
                <h2>🇨🇳 中文内容展示测试</h2>
                <p><strong>说明：</strong>本页面使用JavaScript自动解码Unicode转义序列，完美显示中文内容。</p>

                <div class="demo-grid">
                    <div class="demo-card">
                        <h4>中文文本存储与读取</h4>
                        <%
                        ' 中文文本存储
                        Dim chineseText, setResultCn, getResultCn
                        chineseText = "你好世界！这是中文测试内容。包含特殊字符：@#￥%…&*（）【】测试汉字：北京、上海、广州、深圳"
                        setResultCn = objCOM.RedisSetChinese("demo_chinese_improved", chineseText, 300)
                        If Err.Number = 0 Then
                            Response.Write "<div class='success'>中文设置结果: " & setResultCn & "</div>"
                            getResultCn = objCOM.RedisGetChinese("demo_chinese_improved")
                            If Err.Number = 0 Then
                                Response.Write "<div class='result-box'>" & getResultCn & "</div>"
                            End If
                        Else
                            Response.Write "<div class='error'>错误: " & Err.Description & "</div>"
                            Err.Clear
                        End If
                        %>
                    </div>

                    <div class="demo-card">
                        <h4>复杂中文JSON数据</h4>
                        <%
                        ' 复杂中文JSON数据
                        Dim complexJson, setResultJson, getResultJson
                        complexJson = "{""用户信息"": {""姓名"": ""张三丰"", ""职业"": ""软件架构师"", ""公司"": ""北京阿里巴巴网络技术有限公司"", ""技能列表"": [""Python高级开发"", ""Redis缓存优化"", ""ASP经典开发"", ""数据库设计""], ""个人简介"": ""精通多种编程语言，专注于高性能Web应用开发，有丰富的分布式系统经验。"", ""联系方式"": {""邮箱"": ""zhangsan@company.com"", ""电话"": ""138-0000-0000"", ""地址"": ""北京市海淀区中关村软件园""}}}"
                        setResultJson = objCOM.RedisSetJSON("complex_chinese_json", complexJson, 300)
                        If Err.Number = 0 Then
                            Response.Write "<div class='success'>复杂JSON设置: " & setResultJson & "</div>"
                            getResultJson = objCOM.RedisGetJSON("complex_chinese_json")
                            If Err.Number = 0 Then
                                Response.Write "<div class='result-box'>" & getResultJson & "</div>"
                            End If
                        Else
                            Response.Write "<div class='error'>错误: " & Err.Description & "</div>"
                            Err.Clear
                        End If
                        %>
                    </div>
                </div>
            </div>

            <div class="test-section">
                <h2>📊 系统状态检查</h2>
                <div class="demo-grid">
                    <div class="demo-card">
                        <h4>组件信息</h4>
                        <div class="result-box"><%
                        Dim sysInfo
                        sysInfo = objCOM.CheckStatus()
                        If Err.Number <> 0 Then
                            Response.Write "错误: " & Err.Description
                            Err.Clear
                        Else
                            Response.Write sysInfo
                        End If
                        %></div>
                    </div>

                    <div class="demo-card">
                        <h4>Redis连接测试</h4>
                        <div class="result-box"><%
                        Dim connTest
                        connTest = objCOM.TestConnection()
                        If Err.Number <> 0 Then
                            Response.Write "错误: " & Err.Description
                            Err.Clear
                        Else
                            Response.Write connTest
                        End If
                        %></div>
                    </div>
                </div>
            </div>

            <div class="test-section">
                <h2>🎯 实际应用场景演示</h2>

                <div class="demo-card">
                    <h4>用户会话存储（包含中文用户信息）</h4>
                    <%
                    ' 用户会话存储示例
                    Dim sessionKey, sessionData, sessionResult
                    sessionKey = "用户会话_" & Session.SessionID
                    sessionData = "{""用户ID"": 12345, ""用户名"": ""李明华"", ""真实姓名"": ""李明华先生"", ""角色"": ""系统管理员"", ""部门"": ""信息技术部"", ""登录时间"": """ & Now() & """, ""最后活动"": """ & Now() & """, ""权限列表"": [""系统管理"", ""用户管理"", ""数据查看"", ""报表导出""], ""个人设置"": {""语言"": ""简体中文"", ""时区"": ""北京时间"", ""主题"": ""深色模式""}}"
                    sessionResult = objCOM.RedisSetJSON(sessionKey, sessionData, 1800)  ' 30分钟过期
                    If Err.Number = 0 Then
                        Response.Write "<div class='success'>会话存储结果: " & sessionResult & "</div>"
                        Response.Write "<p><strong>会话ID:</strong> " & Session.SessionID & "</p>"

                        Dim sessionGet
                        sessionGet = objCOM.RedisGetJSON(sessionKey)
                        Response.Write "<div class='result-box'>" & sessionGet & "</div>"
                    End If
                    %>
                </div>
            </div>

            <%
            On Error Goto 0
            Set objCOM = Nothing
            %>

            <div class="test-section">
                <h2>💡 技术说明</h2>
                <div style="background: #e7f3ff; padding: 20px; border-radius: 8px;">
                    <h3>🔧 中文显示解决方案</h3>
                    <ol>
                        <li><strong>服务端处理：</strong>Python COM组件使用Base64编码存储中文，返回时使用Unicode转义序列确保传输安全</li>
                        <li><strong>客户端解码：</strong>JavaScript自动检测并解码Unicode转义序列（\u4e2d\u6587）为可读中文</li>
                        <li><strong>双重显示：</strong>同时显示解码后的中文和原始Unicode格式，便于调试和验证</li>
                        <li><strong>字体优化：</strong>使用Microsoft YaHei字体确保中文显示效果</li>
                    </ol>

                    <h3>✅ 优势特点</h3>
                    <ul>
                        <li>✅ <strong>完美兼容：</strong>支持所有Unicode字符，包括emoji和特殊符号</li>
                        <li>✅ <strong>传输安全：</strong>避免编码冲突，确保数据完整性</li>
                        <li>✅ <strong>调试友好：</strong>可查看原始Unicode和解码后的内容</li>
                        <li>✅ <strong>性能优化：</strong>客户端解码，服务端无额外负担</li>
                    </ul>
                </div>
            </div>
        </div>

        <div style="background: #f8f9fa; padding: 20px; text-align: center; border-top: 1px solid #dee2e6; color: #6c757d;">
            <p><strong>🕐 测试完成时间:</strong> <%= Now() %></p>
            <p><strong>🔗 Redis服务器:</strong> 10.0.0.204:6379 (密码保护)</p>
            <p><strong>🏷️ 组件版本:</strong> RedisCOM.Server v1.0.0 | <strong>📧 技术支持:</strong> 生产环境就绪</p>
        </div>
    </div>
</body>
</html>
